<template>
		<el-container v-cloak>
				<el-header>
						<div>
								<img style="height: 100%;width:60px" src="../assets/header.png" alt=""
													@click="$router.push('/welcome'),saveNavState('/')">
								<span>zoe</span>
						</div>
						<el-button type="info" @click="logout" icon="el-icon-switch-button" circle></el-button>
				</el-header>
				<el-container class="main-container">
						<el-aside :width="is_collapse ? '64px' : '200px'">
								<div class="toggle" @click="toggleBtn">
										<i :class="is_collapse ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"></i>
								</div>
								<el-menu
												:default-active="storeActivePath"
												:router="true"
												:collapse="is_collapse"
												:collapse-transition="false"
												:unique-opened="true"
												background-color="#333741"
												text-color="#fff"
												active-text-color="#409eff">
										<!--遍历一级菜单数据-->
										<el-submenu v-for="(submenu,submenu_i) in menusList" :index="submenu.id+''" :key="submenu.id">
												<!--遍历拿到一级菜单模板-->
												<template slot="title">
														<i :class="iconList[submenu_i]"></i>
														<span>{{ submenu.authName }}</span>
												</template>
												<!--遍历一级菜单中二级菜单数据-->
												<el-menu-item v-for="(menu_item,seci) in submenu.children" :index="'/'+menu_item.path+''"
																										:key="menu_item.id" @click="saveNavState('/'+menu_item.path+'')">
														<template slot="title">
																<!--图标-->
																<i class="el-icon-menu"></i>
																<!--文本内容-->
																<span>{{ menu_item.authName }}</span>
														</template>
												</el-menu-item>
										</el-submenu>
								</el-menu>
						</el-aside>
						<el-main>
								<router-view></router-view>
						</el-main>
				</el-container>
				<el-footer>版权所有</el-footer>
		</el-container>
</template>

<script>
import $axios from "../network/request";

export default {
		name: "Home",
		data() {
				return {
						menusList: [],
						iconList: ['el-icon-user-solid', 'el-icon-s-tools', 'el-icon-s-goods', 'el-icon-s-shop', 'el-icon-s-data'],
						is_collapse: false,
				}
		},
		created() {
				this.init();
		},

		computed: {
				storeActivePath: {
						get() {
								console.log('store', this.$store.state)
								return this.$store.state.activePath
						},
						set(value) {
								this.$store.commit("SET_USER", value)
								this.$store.commit("SET_ACTIVE_PATH", value)
						}
				}
		},

		methods: {
				//初始化菜单
				init() {
						$axios({
								url: '/menus'
						}).then(res => {
								this.menusList = res.data.data
						})
				},
				//退出
				logout() {
						this.$confirm('是否确认退出, 是否继续?', '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
						}).then(() => {
								sessionStorage.removeItem("token");
								this.$router.push(`/login`)
								this.$message({
										type: 'success',
										message: '退出成功!'
								});
						});
				},
				//导航菜单展开收缩
				toggleBtn() {
						this.is_collapse = !this.is_collapse
				},
				//保存默认点击的状态
				saveNavState(activePath) {
						this.storeActivePath = activePath
				}
		},


}
</script>

<style lang="less" scoped>
[v-cloak] {
		display: none;
}

.el-container {
		height: 100%;

		.el-header {
				background-color: #373d41;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 16px;
				color: #dddddd;

				div {
						display: flex;
						align-items: center;

				}

				span {
						margin-left: 20px;
				}
		}

		.main-container {
				height: calc(100% - 120px);
		}

		.el-aside {
				background-color: #333741;

				.el-menu {
						border: 0;
				}

				.toggle {
						background-color: #888888;
						font-size: 20px;
						text-align: center;
						cursor: pointer;
				}
		}

		.el-main {
				background-color: rgba(234, 233, 233, 0.97);
		}

		.el-footer {
				background-color: #a7a7a7;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
		}
}


</style>
